<html>

<head>
  <title>数字滚动插件</title>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" name="viewport">
  <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  <style>
    /*数字滚动插件的CSS可调整样式*/

    .mt-number-animate {
      font-family: '微软雅黑';
      line-height: 40px;
      height: 40px;
      /*设置数字显示高度*/
      ;
      font-size: 36px;
      /*设置数字大小*/
      overflow: hidden;
      display: inline-block;
      position: relative;
    }

    .mt-number-animate .mt-number-animate-dot {
      width: 15px;
      /*设置分割符宽度*/
      line-height: 40px;
      float: left;
      text-align: center;
    }

    .mt-number-animate .mt-number-animate-dom {
      width: 20px;
      /*设置单个数字宽度*/
      text-align: center;
      float: left;
	  background-color:red;
	  margin:0 2px;
      position: relative;
      top: 0;
    }

    .mt-number-animate .mt-number-animate-dom .mt-number-animate-span {
      width: 100%;
      float: left;
    }
  </style>
</head>

<body>
  <br>
  <br> 有分隔符，有小数点：
  <div class="numberRun"></div>
  <br>
  <br> 只有分隔符：
  <div class="numberRun2"></div>
  <br>
  <br> 只有小数点：
  <div class="numberRun3"></div>
  <br>
  <br> 无分隔符，无小数点：
  <div class="numberRun4"></div>

</body>
<script>
  /**
  *  by Mantou qq:676015863
  *  数字滚动插件 v1.0
  */
  ; (function ($) {
    $.fn.numberAnimate = function (setting) {
      var defaults = {
        speed: 1000,//动画速度
        num: "", //初始化值
        iniAnimate: true, //是否要初始化动画效果
        symbol: '',//默认的分割符号，千，万，千万
        dot: 0 //保留几位小数点
      }
      //如果setting为空，就取default的值
      var setting = $.extend(defaults, setting);

      //如果对象有多个，提示出错
      if ($(this).length > 1) {
        alert("just only one obj!");
        return;
      }

      //如果未设置初始化值。提示出错
      if (setting.num == "") {
        alert("must set a num!");
        return;
      }
      var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\
            <span class="mt-number-animate-span">0</span>\
            <span class="mt-number-animate-span">1</span>\
            <span class="mt-number-animate-span">2</span>\
            <span class="mt-number-animate-span">3</span>\
            <span class="mt-number-animate-span">4</span>\
            <span class="mt-number-animate-span">5</span>\
            <span class="mt-number-animate-span">6</span>\
            <span class="mt-number-animate-span">7</span>\
            <span class="mt-number-animate-span">8</span>\
            <span class="mt-number-animate-span">9</span>\
            <span class="mt-number-animate-span">.</span>\
          </div>';

      //数字处理
      var numToArr = function (num) {
        num = parseFloat(num).toFixed(setting.dot);
        if (typeof (num) == 'number') {
          var arrStr = num.toString().split("");
        } else {
          var arrStr = num.split("");
        }
        //console.log(arrStr);
        return arrStr;
      }

      //设置DOM symbol:分割符号
      var setNumDom = function (arrStr) {
        var shtml = '<div class="mt-number-animate">';
        for (var i = 0, len = arrStr.length; i < len; i++) {
          if (i != 0 && (len - i) % 3 == 0 && setting.symbol != "" && arrStr[i] != ".") {
            shtml += '<div class="mt-number-animate-dot">' + setting.symbol + '</div>' + nHtml.replace("{{num}}", arrStr[i]);
          } else {
            shtml += nHtml.replace("{{num}}", arrStr[i]);
          }
        }
        shtml += '</div>';
        return shtml;
      }

      //执行动画
      var runAnimate = function ($parent) {
        $parent.find(".mt-number-animate-dom").each(function () {
          var num = $(this).attr("data-num");
          num = (num == "." ? 10 : num);
          var spanHei = $(this).height() / 11; //11为元素个数
          var thisTop = -num * spanHei + "px";
          if (thisTop != $(this).css("top")) {
            if (setting.iniAnimate) {
              //HTML5不支持
              if (!window.applicationCache) {
                $(this).animate({
                  top: thisTop
                }, setting.speed);
              } else {
                $(this).css({
                  'transform': 'translateY(' + thisTop + ')',
                  '-ms-transform': 'translateY(' + thisTop + ')',   /* IE 9 */
                  '-moz-transform': 'translateY(' + thisTop + ')',  /* Firefox */
                  '-webkit-transform': 'translateY(' + thisTop + ')', /* Safari 和 Chrome */
                  '-o-transform': 'translateY(' + thisTop + ')',
                  '-ms-transition': setting.speed / 1000 + 's',
                  '-moz-transition': setting.speed / 1000 + 's',
                  '-webkit-transition': setting.speed / 1000 + 's',
                  '-o-transition': setting.speed / 1000 + 's',
                  'transition': setting.speed / 1000 + 's'
                });
              }
            } else {
              setting.iniAnimate = true;
              $(this).css({
                top: thisTop
              });
            }
          }
        });
      }

      //初始化
      var init = function ($parent) {
        //初始化
        $parent.html(setNumDom(numToArr(setting.num)));
        runAnimate($parent);
      };

      //重置参数
      this.resetData = function (num,speed) {
        var newArr = numToArr(num);
        var $dom = $(this).find(".mt-number-animate-dom");
        if ($dom.length < newArr.length) {
          $(this).html(setNumDom(numToArr(num)));
        } else {
          $dom.each(function (index, el) {
            $(this).attr("data-num", newArr[index]);
          });
        }
        setting.speed = speed;
        runAnimate($(this));
      }
      //init
      init($(this));
      return this;
    }
  })(jQuery);

  $(function () {

    //初始化
    var numRun = $(".numberRun").numberAnimate({ num: '15343242.10', dot: 2, speed: 2000, symbol: "," });
    var nums = 15343242.10;
    setInterval(function () {
      nums += 3433.24;
      numRun.resetData(nums);
      // $(".numberRun").numberAnimate({ num: nums,iniAnimate:false, dot: 2, speed: 1000, symbol: "," });
      
    }, 3000);


    var numRun2 = $(".numberRun2").numberAnimate({ num: '15343242', speed: 2000, symbol: "," });
    var nums2 = 15343242;
    setInterval(function () {
      nums2 += 1433;
      numRun2.resetData(nums2);
    }, 2000);


    var numRun3 = $(".numberRun3").numberAnimate({ num: '52353434.343', dot: 3, speed: 2000 });
    var nums3 = 52353434.343;
    setInterval(function () {
      nums3 += 454.521;
      numRun3.resetData(nums3);
    }, 4000);

    var numRun4 = $(".numberRun4").numberAnimate({ num: '52353434', speed: 2000 });
    var nums4 = 52353434;
    setInterval(function () {
      nums4 += 123454;
      numRun4.resetData(nums4);
    }, 3500);

  });
</script>

</html>